<!--
 * @Date: 2023-02-27 20:46:51
 * @LastEditors: 于波
 * @LastEditTime: 2023-02-27 22:14:00
 * @Description: 
-->
<template>
  <Header />
  <main>
    <div class="search">
      <div class="input">
        <el-input
          v-model="input"
          placeholder="请输入感兴趣的职位/话题"
          style="width: 50%"
          size="large"
          :prefix-icon="Search"
        />
        <el-button
          size="large"
          type="primary"
          @click="$router.push(`/search?key=${input}`)"
        >
          搜索
        </el-button>
      </div>
    </div>
    <div class="top">
      <div class="carousel">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in ads" :key="item.id">
            <div class="mark">{{ item.text }}</div>
            <img
              draggable="false"
              :src="item.banner_img"
              style="width: 100%; height: 500px; user-select: none"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="type-list">
        <div class="type">
          <span>热门分类:</span>
          <a
            :href="`/search?type=${item.id}`"
            v-for="item in types"
            :key="item.id"
          >
            {{ item.name }}
            <strong style="margin-left:auto" >&gt;</strong>
          </a>
        </div>
      </div>
    </div>

    <h1 style="text-align: left;margin-top: 80px;" >最新发布</h1>
    <div class="article-list">
      <div class="article" v-for="item in articleList" :key="item.id">
        <h3>
          <router-link target="_blank" :to="`/article/${item.id}`">
            {{ item.title }}
          </router-link>
        </h3>
        <p>
          {{ item.describe }}
        </p>

        <div class="bottom">
          <span style="display: flex; align-items: center; margin-left: auto">
            <img
              :src="item.avatar || tx"
              alt=""
              width="30"
              height="30"
              style="border-radius: 50%; display: block; margin-right: 10px"
            />
            {{ item.username }}
          </span>
          <span>发布时间：{{ item.createTime }}</span>

          <span v-if="item.type">分类：{{ item.type }}</span>
        </div>
        <el-divider />
      </div>
    </div>
  </main>
</template>
<script setup lang="ts">
import Header from "@/components/Header.vue";
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import request from "@/api";
import { Article, Banner, Type } from "@/types";
import tx from "@/assets/tx.png";
// 搜索
const input = ref("");
// 文章列表
const articleList = ref<Array<Article>>([]);
// 类型
const types = ref<Array<Type>>([]);

// 轮播图
const ads = ref<Array<Banner>>([]);

request.get("/getBannerList").then((res) => {
  ads.value = res.data;
});

// 类型列表请求
request.get("/GetArticleType").then((res) => {
  types.value = res.data;
});

// 文章列表请求
request.get("/GetArticleList").then((res) => {
  articleList.value = res.data;
});
</script>
<style scoped lang="less">
main {
  width: 80%;
  margin: 0 auto;
  padding: 50px;
  --el-color-primary: #00c8c8;
  .top {
    display: flex;
    .type-list {
      flex: 1;
      .type {
        margin-left: 20px;
        display: flex;
        flex-flow: column ;
        justify-content: flex-start;
        background-color: #fff;
        padding: 20px;
        span {
            display: block;
            color: #000;
            padding: 10px;
            width: 100%;
            background-color: #fff;
            box-sizing: border-box;
            font-weight: 700;
        }
        a {
            display: block;
            color: #00c8c8;
            width: 100%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            &:hover {
                background: #eee;
            }
        }
      }
    }
    .carousel {
      flex: 2;
      margin: 0 auto;
      position: relative;
      .mark {
        width: 100%;
        height: 50px;
        bottom: 0;
        left: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 99;
        display: flex;
        align-items: center;
        padding: 0 20px;
        color: aliceblue;
        font-size: large;
      }
    }
  }
  .search {
    margin: 70px 0;
    margin-top: 20px;
    .input {
      display: flex;
      justify-content: center;
    }
  }

  h1 {
   display: inline-block;
    user-select: none;
    border-bottom: 5px solid #00c8c8;
    line-height: 50px;
    margin-bottom: 70px;
  }
  .article-list {
    .article {
      background-color: #eee;
      h3 {
        display: inline-block;
        a {
          color: #000;
        }
        margin-bottom: 0;
        margin-top: 0;
        font-size: 24px;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
      p {
        text-indent: 2em;
      }
      .bottom {
        display: flex;
        margin-top: 10px;
        align-items: center;
        span {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
